<!doctype html>
<html>

<head>
  <title>Rich Text Editor</title>
  <script type="text/javascript">
    var oDoc, sDefTxt;

    function initDoc() {
      oDoc = document.getElementById("textBox");
      sDefTxt = oDoc.innerHTML;
      if (document.compForm.switchMode.checked) {
        setDocMode(true);
      }
    }

    function formatDoc(sCmd, sValue) {
      if (validateMode()) {
        document.execCommand(sCmd, false, sValue);
        oDoc.focus();
      }
    }

    function validateMode() {
      if (!document.compForm.switchMode.checked) {
        return true;
      }
      alert("Uncheck \"Show HTML\".");
      oDoc.focus();
      return false;
    }

    function setDocMode(bToSource) {
      var oContent;
      if (bToSource) {
        oContent = document.createTextNode(oDoc.innerHTML);
        oDoc.innerHTML = "";
        var oPre = document.createElement("pre");
        oDoc.contentEditable = false;
        oPre.id = "sourceText";
        oPre.contentEditable = true;
        oPre.appendChild(oContent);
        oDoc.appendChild(oPre);
        document.execCommand("defaultParagraphSeparator", false, "div");
      } else {
        if (document.all) {
          oDoc.innerHTML = oDoc.innerText;
        } else {
          oContent = document.createRange();
          oContent.selectNodeContents(oDoc.firstChild);
          oDoc.innerHTML = oContent.toString();
        }
        oDoc.contentEditable = true;
      }
      oDoc.focus();
    }

    function printDoc() {
      if (!validateMode()) {
        return;
      }
      var oPrntWin = window.open("", "_blank", "width=450,height=470,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
      oPrntWin.document.open();
      oPrntWin.document.write("<!doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
      oPrntWin.document.close();
    }
  </script>
  <style type="text/css">
    .intLink {
      cursor: pointer;
    }

    img.intLink {
      border: 0;
    }

    #toolBar1 select {
      font-size: 10px;
    }

    #textBox {
      width: 540px;
      height: 200px;
      border: 1px #000000 solid;
      padding: 12px;
      overflow: scroll;
    }

    #textBox #sourceText {
      padding: 0;
      margin: 0;
      min-width: 498px;
      min-height: 200px;
    }

    #editMode label {
      cursor: pointer;
    }
  </style>
</head>

<body onload="initDoc();">
  <form name="compForm" method="post" action="sample.php" onsubmit="if(validateMode()){this.myDoc.value=oDoc.innerHTML;return true;}return false;">
    <input type="hidden" name="myDoc">
    <div id="toolBar1">
      <select onchange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
        <option selected>- formatting -</option>
        <option value="h1">Title 1 &lt;h1&gt;</option>
        <option value="h2">Title 2 &lt;h2&gt;</option>
        <option value="h3">Title 3 &lt;h3&gt;</option>
        <option value="h4">Title 4 &lt;h4&gt;</option>
        <option value="h5">Title 5 &lt;h5&gt;</option>
        <option value="h6">Subtitle &lt;h6&gt;</option>
        <option value="p">Paragraph &lt;p&gt;</option>
        <option value="pre">Preformatted &lt;pre&gt;</option>
      </select>
      <select onchange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
        <option class="heading" selected>- font -</option>
        <option>Arial</option>
        <option>Arial Black</option>
        <option>Courier New</option>
        <option>Times New Roman</option>
      </select>
      <select onchange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
        <option class="heading" selected>- size -</option>
        <option value="1">Very small</option>
        <option value="2">A bit small</option>
        <option value="3">Normal</option>
        <option value="4">Medium-large</option>
        <option value="5">Big</option>
        <option value="6">Very big</option>
        <option value="7">Maximum</option>
      </select>
      <select onchange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
        <option class="heading" selected>- color -</option>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="green">Green</option>
        <option value="black">Black</option>
      </select>
      <select onchange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
        <option class="heading" selected>- background -</option>
        <option value="red">Red</option>
        <option value="green">Green</option>
        <option value="black">Black</option>
      </select>
    </div>
    <div id="toolBar2">
      <img class="intLink" title="Clean" onclick="if(validateMode()&&confirm('Are you sure?')){oDoc.innerHTML=sDefTxt};" src="" />
      <img class="intLink" title="Print" onclick="printDoc();" src="">
      <img class="intLink" title="Undo" onclick="formatDoc('undo');" src="" />
      <img class="intLink" title="Redo" onclick="formatDoc('redo');" src="" />
      <img class="intLink" title="Remove formatting" onclick="formatDoc('removeFormat')" src="">
      <img class="intLink" title="Bold" onclick="formatDoc('bold');" src="" />
      <img class="intLink" title="Italic" onclick="formatDoc('italic');" src="" />
      <img class="intLink" title="Underline" onclick="formatDoc('underline');" src="" />
      <img class="intLink" title="Left align" onclick="formatDoc('justifyleft');" src="" />
      <img class="intLink" title="Center align" onclick="formatDoc('justifycenter');" src="" />
      <img class="intLink" title="Right align" onclick="formatDoc('justifyright');" src="" />
      <img class="intLink" title="Numbered list" onclick="formatDoc('insertorderedlist');" src="" />
      <img class="intLink" title="Dotted list" onclick="formatDoc('insertunorderedlist');" src="" />
      <img class="intLink" title="Quote" onclick="formatDoc('formatblock','blockquote');" src="" />
      <img class="intLink" title="Delete indentation" onclick="formatDoc('outdent');" src="" />
      <img class="intLink" title="Add indentation" onclick="formatDoc('indent');" src="" />
      <img class="intLink" title="Hyperlink" onclick="var sLnk=prompt('Write the URL here','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="" />
      <img class="intLink" title="Cut" onclick="formatDoc('cut');" src="" />
      <img class="intLink" title="Copy" onclick="formatDoc('copy');" src="" />
      <img class="intLink" title="Paste" onclick="formatDoc('paste');" src="" />
    </div>
    <div id="textBox" contenteditable="true">
      <p>Lorem ipsum</p>
    </div>
    <p id="editMode"><input type="checkbox" name="switchMode" id="switchBox" onchange="setDocMode(this.checked);" /> <label for="switchBox">Show HTML</label></p>
    <p><input type="submit" value="Send" /></p>
  </form>
</body>

</html>